<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MQTT控制面板</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <!-- 顶部导航栏 -->
        <header class="header">
            <h1 class="logo">MQTT控制面板</h1>
            <nav class="nav">
                <a href="index.html" class="nav-link active">首页</a>
                <a href="config.html" class="nav-link">配置</a>
                <a href="user.html" class="nav-link">控制</a>
            </nav>
        </header>

        <!-- 主内容区域 -->
        <main class="main-content">
            <section class="welcome-section">
                <h2>欢迎使用MQTT控制面板</h2>
                <p>这是一个基于MQTT协议的远程设备控制网页应用。您可以通过配置页面设置MQTT连接参数和控制指令，然后在控制页面进行设备操作。</p>
            </section>

            <section class="quick-actions">
                <h3>快速操作</h3>
                <div class="action-grid">
                    <a href="config.html" class="action-card">
                        <div class="action-icon">⚙️</div>
                        <h4>配置设置</h4>
                        <p>配置MQTT连接参数和控制指令</p>
                    </a>
                    <a href="user.html" class="action-card">
                        <div class="action-icon">🎮</div>
                        <h4>设备控制</h4>
                        <p>进入控制页面操作设备</p>
                    </a>
                </div>
            </section>

            <section class="instructions">
                <h3>使用说明</h3>
                <ol>
                    <li>首次使用请先进入<strong>配置页面</strong>设置MQTT broker连接参数</li>
                    <li>配置3组控制指令的topic和payload</li>
                    <li>保存配置后进入<strong>控制页面</strong>进行设备操作</li>
                    <li>所有配置数据将保存在浏览器本地存储中</li>
                </ol>
            </section>
        </main>

        <!-- 底部信息 -->
        <footer class="footer">
            <p>&copy; 2025 MQTT控制面板 v1.0</p>
        </footer>
    </div>
</body>
</html>